<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .article{
            margin: 0 auto;
            width: 960px;
            height: 300px;
            border: 1px solid red;
            padding: 10px;
        }
        .article img{
            margin: 10px;
            float: left;
            /*在图文混排下，图片浮动后，文字没有浮动，不会出现压盖的效果，出现环绕的效果。*/
        }
    </style>
</head>
<body>

<!-- 图文混排 -->
<div class="article">
    <!--在标准的文档流里面，图片和文字，表单输入框都是基于文字的基线对齐。-->
    <!--  按住 ctrl 鼠标左键单击图片的路径，可以跳转到图片所处的目录-->
    <img src="./imgs/fj.jpg" alt=""> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae tempore totam voluptatem. Distinctio, dolor, libero?
    nctio odio sed unde. Accusantiuoluptatem. Distinctio, dolor, libero? nctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae temponctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae temponctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil oboluptatem. Distinctio, dolor, libero? nctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae temponctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae temponctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obm adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae temponctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae temponctio odio sed unde. Accusantium adipisci aspernatur consequuntur, distinctio, doloribus eveniet nihil obcaecati quia, ratione repudiandae tempo
</div>
</body>
</html>